Role of .svelte Files
In Svelte, components are written inside .svelte files. Each file represents a single component and contains everything it needs: HTML for structure, JavaScript for logic, and CSS for styling.
Encapsulation – keeps markup, logic, and styles together in one file.
Automatic scoping – CSS defined in a
.sveltefile is scoped to that component only.Reactivity – variables and reactive statements inside
<script>automatically update the UI.Compilation – the
.sveltefile is compiled into optimized JavaScript, HTML, and CSS at build time.
Here, the .svelte file defines a component with logic (name variable), styles (scoped h1), and markup (<h1>). When compiled, it becomes efficient JavaScript, HTML, and CSS that run directly in the browser.